<!DOCTYPE html>
<html lang="ru">
  <head>
    <link rel="stylesheet" href="/styles/index.css" />
    <link rel="stylesheet" href="/styles/pay/pay.css" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://telegram.org/js/telegram-web-app.js"></script>
    <script src="/displayBalance.js" type="module"></script>
    <!-- Yandex.Metrika counter -->
    <script type="text/javascript">
      (function (m, e, t, r, i, k, a) {
        m[i] =
          m[i] ||
          function () {
            (m[i].a = m[i].a || []).push(arguments);
          };
        m[i].l = 1 * new Date();
        for (var j = 0; j < document.scripts.length; j++) {
          if (document.scripts[j].src === r) {
            return;
          }
        }
        (k = e.createElement(t)),
          (a = e.getElementsByTagName(t)[0]),
          (k.async = 1),
          (k.src = r),
          a.parentNode.insertBefore(k, a);
      })(
        window,
        document,
        "script",
        "https://mc.yandex.ru/metrika/tag.js",
        "ym"
      );

      ym(97272843, "init", {
        clickmap: true,
        trackLinks: true,
        accurateTrackBounce: true,
        webvisor: true,
      });
    </script>
    <noscript
      ><div>
        <img
          src="https://mc.yandex.ru/watch/97272843"
          style="position: absolute; left: -9999px"
          alt=""
        /></div
    ></noscript>
    <!-- /Yandex.Metrika counter -->
    <title>Баланс</title>
    <!-- <script>
      let tg = window.Telegram.WebApp;
      try {
        tg.initDataUnsafe.user.id;
        // document.getElementById("test").innerHTML = "через телеграм";
      } catch (_) {
        window.location.href = "/accessError/";
        // document.getElementById("test").innerHTML = "через сайт";
      }
    </script> -->
  </head>
  <body>
    <div class="navbar">
      <a class="tab" id="home" href="/">
        <img src="/image/house.svg" alt="house" />
        <label for="home">Главная</label>
      </a>
      <a class="tab" id="pay" class="mButton">
        <img src="/image/wallet2-1.svg" alt="wallet" />
        <label for="pay">Баланс</label>
      </a>
      <a class="tab" id="schedule" class="mButton" href="/schedule/"
        ><img src="/image/calendar-week.svg" alt="calendar" />
        <label for="schedule">Расписание</label>
      </a>
      <a class="tab" id="item" href="/items/"
        ><img src="/image/mortarboard.svg" alt="mort" />
        <label for="item">Предметы</label>
      </a>
      <a class="tab" id="another" href="/another/"
        ><img src="/image/three-dots.svg" alt="dots" />
        <label for="another">Еще</label>
      </a>
    </div>
    <div class="header">
      <div class="header2">
        <div class="circle">
          <p class="circleName"></p>
        </div>
        <div class="nameHeader">
          <span id="displayName"></span>
          <img src="/image/chevron-right.svg" />
        </div>
      </div>
      <div class="balanceHeader">
        <div style="display: flex; align-items: center">
          <p id="headerRub">0</p>
          <p>₽</p>
        </div>
        <div style="display: flex; align-items: center">
          <p id="headerEuro">0</p>
          <p>€</p>
        </div>
      </div>
    </div>
    <div class="main" id="mystate">
      <h1>Баланс</h1>
      <div class="bonusMain">
        <div class="bonus">
          <p class="bonusText">Бонусы</p>
          <p class="link bonusHowGet" id="howGetLink">Как получить?</p>
        </div>
        <div class="gift">
          <div class="giftImage">
            <img src="/image/gift.svg" style="width: 12px; height: 12px" />
          </div>
          <h2 id="BodyBonus"></h2>
        </div>
      </div>
      <div class="balanceMain">
        <div class="balanceRub">
          <div class="valute">
            <p>Рубли</p>
            <img src="/image/Group 50.svg" />
          </div>
          <div class="bodyValute">
            <p id="displayBobyRub">0</p>
            <p>₽</p>
          </div>
        </div>
        <div class="balanceEuro">
          <div class="valute">
            <p>Евро</p>
            <img src="/image/Group 51.svg" />
          </div>
          <div class="bodyValute">
            <p id="displayBodyEuro">0</p>
            <p>€</p>
          </div>
        </div>
      </div>
      <button class="btn">Пополнить</button>
      <h1>История операций</h1>
      <div id="innerHistory"></div>
      <button class="loadMore classHide">Показать еще</button>
    </div>
    <div id="referrer" class="referrer">
      <div class="bPopupContent">
        <div class="flex">
          <img
            src="/image/Union.svg"
            alt="close"
            class="btn-close"
            id="closeBtn1"
          />
        </div>
        <h1>Пополнить баланс</h1>
        <div class="classRadio">
          <input id="typeRub" type="radio" name="valute" checked />
          <label for="typeRub">Рубли</label>
          <input id="typeEuro" type="radio" name="valute" />
          <label for="typeEuro">Евро</label>
        </div>
        <input
          id="summ"
          type="number"
          min="1"
          name="MNT_AMOUNT"
          required
          placeholder="Сумма пополнения"
        />
        <p id="errMess"></p>
        <input
          id="bonusInput"
          type="text"
          name="promoCode"
          placeholder="Промокод"
        />
        <p id="errMessBonus"></p>
        <button id="sendPayment" type="submit">Перейти к оплате</button>
      </div>
    </div>
    <div id="firstReferrer" class="referrer">
      <div class="bPopupContent">
        <div class="flex">
          <img src="/image/Union.svg" id="closeBtn2" style="cursor: pointer" />
        </div>
        <h1>Как получить бонусы</h1>
        <p>
          Дарим до 3 000 ₽ на счет при оплате<br />
          на 10 000 — на счет получаете 11 000 <br />
          на 20 000 — на счет получаете 22 000 <br />
          на 30 000 — на счет получаете 33 000<br />
        </p>
        <button id="closePopUpButton">Понятно</button>
      </div>
    </div>
    <div class="preloader">
      <div class="loader"></div>
    </div>
    <script src="./script.js" type="module"></script>
  </body>
</html>
